<template>
  <el-card class="card-box">
    <template #header>
      <div class="card-header">
        <span>男女比例分析</span>
      </div>
    </template>
    <div class='chart-wrap'>
      <div  ref="chartRef" class="chart-content" v-show="isShowChart"></div>
      <el-empty description="暂无数据" v-show="!isShowChart"/>
    </div>
  </el-card>
</template>

<script setup>
  import * as echarts from 'echarts';
  import {getSexRadioOption } from '../../echartOption'
  const props = defineProps({
    statisticData:{
      type:Object,
      default:()=>{}
    }
  })
  let isShowChart = ref(false);
  let chatData = reactive([])
  const echartsInstance = shallowRef(null);
  const chartRef = shallowRef();
    const initChart = ()=>{
      const chatPieData = [
        {
          name:"男性",
          value:chatData?.menNum
        },
        {
          name:"女性",
          value:chatData?.womenNum
        }
      ]
      echartsInstance.value = null;
      echartsInstance.value = echarts.init(chartRef.value, null, {renderer:'svg'})
      const option = getSexRadioOption(chatPieData,false)
      echartsInstance.value.setOption(option,true)
      window.addEventListener('resize', resize)
    }

    const resize = () =>{
      if(!echartsInstance.value) return;
      echartsInstance.value?.resize()
    }

    onUnmounted(() => {
      // 组件卸载时销毁图表实例
      if(echartsInstance.value){
        echartsInstance.value.dispose();
      }
    });

    watch(() => props.statisticData,(newValue)=>{
      if(newValue){
        isShowChart.value = true;
        chatData = newValue;
        nextTick(() => {
          initChart()
        })
      }
      else{
        isShowChart.value = false;
        chatData = {}
      }
    },
    {
      deep: true,
      immediate: true
    })
</script>
<style lang="scss" scoped>
.card-box{
  width: 100%;
  .chart-wrap{
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    .chart-content{
      width: 100%;
      height: 100%;
    }
  }
}
  
</style>
